<template>
  <div class="trainingCategory">
    <div class="t-header">
      <div class="t-h-title"> <i class="iconfont icon-quanbu"></i>训练分类管理</div>
    </div>
    <div class="addCategory">
      <n-button class="a-btn" round size="small" type="success" @click="isShowCreate = true"><i
          class="iconfont icon-tianjia"></i>创建分类</n-button>
    </div>
    <div class="category">
      <el-tag class="item" round v-for="item in categoryList" :key="item.id" closable @close="deleteCategory(item.id)"
        :color="item.color" effect="dark" size="large" @click="showUpdateDialog(item)">
        <n-ellipsis style="max-width: 50px">
          {{ item.name }}
        </n-ellipsis>
      </el-tag>
    </div>
    <n-modal v-model:show="isShowCreate">
      <n-card :bordered="false" role="dialog" aria-modal="true" class="card">
        <h2 class="bigtitle">增加分类</h2>
        <div class="items">
          <div class="c-item">
            <div class="title">分类名称</div><n-input class="ninput" placeholder="分类名称" round
              v-model:value="category.name"></n-input>
          </div>
          <div class="c-item">
            <div class="title">分类颜色</div>
            <div class="colorPickerDiv"><el-color-picker class="colorPicker" v-model="category.color" /></div>
          </div>
          <div class="btnDiv">
            <n-button class="nbtn" type="success" size="small" @click="appendCategory()">添加</n-button>
          </div>
        </div>
      </n-card>
    </n-modal>
    <n-modal v-model:show="isShowUpdate">
      <n-card :bordered="false" role="dialog" aria-modal="true" class="card">
        <h2 class="bigtitle">修改分类</h2>
        <div class="items">
          <div class="c-item">
            <div class="title">分类名称</div><n-input class="ninput" placeholder="分类名称" round
              v-model:value="currentCategory.name"></n-input>
          </div>
          <div class="c-item">
            <div class="title">分类颜色</div>
            <div class="colorPickerDiv"><el-color-picker class="colorPicker" v-model="currentCategory.color" /></div>
          </div>
          <div class="btnDiv">
            <n-button class="nbtn" type="success" size="small" @click="updateCategory()">更新</n-button>
          </div>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script>
import { getCategoryAPI, deleteCategoryAPI, appendCategoryAPI, updateCategoryAPI } from "@/api/adminAPI/adminAPI"
import { ElMessage } from 'element-plus'

export default {
  data () {
    return {
      categoryList: [],
      isShowCreate: false,
      isShowUpdate: false,
      category: {
        name: '',
        color: ''
      },
      currentCategory: {}
    }
  },
  mounted () {
    this.getCategoryList()
  },
  methods: {
    //获取训练分类
    async getCategoryList () {
      await getCategoryAPI().then(res => {
        if (res.data.code === 200) {
          this.categoryList = res.data.data
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    //删除分类
    async deleteCategory (id) {
      await deleteCategoryAPI([id]).then(res => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.msg)
          this.getCategoryList()
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    //添加分类
    async appendCategory () {
      await appendCategoryAPI(this.category).then(res => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.msg)
          this.category = {
            name: '',
            color: ''
          }
          this.getCategoryList()
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    showUpdateDialog (item) {
      this.currentCategory = item
      this.isShowUpdate = true
    },
    //更新分类
    async updateCategory () {
      await updateCategoryAPI(this.currentCategory).then(res => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.msg)
          this.getCategoryList()
          this.isShowUpdate = false
        }
      }).catch(err => {
        console.log("系统错误")
      })
    }
  }
}
</script>

<style lang="less" scoped>
.trainingCategory {
  margin: auto;
  width: 96%;
  height: 92vh;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9,
    -12px -12px 50px #ffffff;

  .t-header {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .t-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .addCategory {
    margin: 20px 0;
  }

  .category {
    width: 98%;
    // min-height: 50vh;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;

    .item {
      margin: 0 8px 12px 8px;
      width: 100px;
      text-align: center;

    }
  }
}

.card {
  border-radius: 20px;
  overflow: hidden;
  height: 60vh;
  width: 40vw;

  .bigtitle {
    border-bottom: 1px solid @bgColor;
    padding-bottom: 10px;
  }

  .items {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    height: 65%;

    .c-item {
      display: flex;
      height: 30px;
      justify-content: center;
      margin: 10px 0;

      .title {
        height: 30px;
        line-height: 30px;
        width: 15%;
      }

      .ninput {
        width: 50%;
      }

      .colorPickerDiv {
        width: 50%;
        display: flex;
        justify-content: center;
      }
    }

    .btnDiv {
      margin: auto auto 0 auto;
      display: flex;
      justify-content: center;

      .nbtn {
        width: 80px;
      }
    }
  }

}

::v-deep(.n-card__content) {
  padding: 10px !important;
}
</style>